<template>
    <div class="header">
        <div class="header-left"><i class="iconfont back-icon">&#xe624;</i></div>
        <div class="header-input"><i class="iconfont">&#xe632;</i>输入城市/景点/游玩主题</div>
        <router-link to="/city">
            <div class="header-right">{{this.city}}<i class="iconfont arrow-icon">&#xe64a;</i></div>
        </router-link>
    </div>
</template>

<script>
    import { mapState} from 'vuex'
    export default {
        name: "HomeHeader",
        data: function () {
             return {
                 
             }
        },
        props: {
            
        },
        computed: {
          ...mapState(['city'])/*, // 把vuex里面的数据映射到这个组件的computed属性里
          ...mapGetters(['doubleCity'])*/
        }
    }  
    
    
    /* 
       1rem == html font-size = 50px
    */
</script>
<style lang="stylus" scoped>
@import "~styles/varibles.styl"
    .header 
       display: flex
       line-height: $headerHight
       height: $headerHight
       background: $bgColor
       color: #fff
       .header-left 
         width: .64rem
         .back-icon
           display:block;
           text-align: center
           font-size: .4rem 
        .header-input
          flex: 1
          height: .64rem 
          line-height: .64rem
          padding-left: .2rem
          margin-top: .12rem
          margin-left: .2rem
          background: #fff
          border-radius: .1rem
          color:#ccc
        .header-right
          min-width: 1.04rem
          padding: 0.1rem
          text-align: center
          color: #fff
          .arrow-icon
             margin-left:.10rem
             font-size: .24rem;
</style>
